<template>
  <div class="scanner-container">
    <van-nav-bar title="二维码扫描" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div id="reader" class="qr-reader"></div>

  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { Html5Qrcode } from 'html5-qrcode';
import { Dialog } from 'vant';
import router from '@/router';
import { GetResolveQRCode } from '@/api/core';

const onClickLeft = () => history.back();
let html5QrCode;

const chargeRecord=ref({
  id:1,
  stationId:1,
  price:8.88,
  batteryCapacity:30,
  vehicleIdentifyNo:'AC10265354785'
})

// 加密数据的函数
function encryptData(data) {
  return btoa(JSON.stringify(data)); // 简单的 base64 编码
}

function startCharging() {
  const encryptedData = encryptData(chargeRecord.value);
   router.push(`/charging/start?data=${encryptedData}`);
  console.log(encryptedData);
  
}

startCharging()

const startScanner = () => {
  html5QrCode = new Html5Qrcode("reader");
  const config = {
    fps: 30,
    qrbox: { width: 300, height: 300 },
    aspectRatio: 1.0,
    videoConstraints: {
      facingMode: "environment",
      width: { ideal: 1280 },
      height: { ideal: 720 }
    }
  };

  html5QrCode.start(
    { facingMode: "environment" },
    config,
    (decodedText) => {
      console.log('Decoded text:', decodedText);
      if (decodedText != null) {

        GetResolveQRCode(decodedText).then(res=>{
         console.log(res.data);
         chargeRecord.value=res.data.data
         
          startCharging()

        })

       
      }
      // Dialog.alert({
      //   title: '扫描成功',
      //   message: `内容：${decodedText}`,
      // }).then(() => {
      //   // 继续扫描
      //   startScanner(); // 重新启动扫描
      // });
    },
    (errorMessage) => {
      console.warn('QR Code scan error:', errorMessage);
    }
  ).catch(err => {
    console.error('Unable to start scanning:', err);
    Dialog.alert({
      title: '错误',
      message: '无法访问摄像头，请检查权限设置。'
    });
  });
};

onMounted(() => {
  startScanner();
});

onBeforeUnmount(() => {
  if (html5QrCode) {
    html5QrCode.stop().then(() => {
      console.log("QR Code scanning stopped.");
    }).catch(err => {
      console.error("Error stopping QR Code scanning:", err);
    });
  }
});
</script>

<style>
.scanner-container {
  text-align: center;
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a, #4d4d4d);
}

.qr-reader {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  flex-direction: column;
  z-index: 2;
}

.instructions {
  color: #00FF00;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 10px;
  width: 80%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  font-size: 18px;
  font-weight: bold;
}

.scanner-box {
  position: relative;
  width: 20%;
  height: 20%;
  border: 2px dashed #00FF00;
  border-radius: 10px;
  animation: pulse 1.5s infinite;
  box-shadow: 0 4px 20px rgba(0, 255, 0, 0.5);
}

.scanner-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(0, 255, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  animation: blink 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
</style>